import { View, ScrollView } from '@tarojs/components'
import { AtAvatar, AtIcon, AtBadge, AtButton, AtTextarea } from 'taro-ui'
import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import env from '../../store/env.config'

import MyShoppingList from './child/MyShoppingList'
import MyOrderList from './child/MyOrderList'
import './my.scss'

type PageStateProps = {
  store: {
    counterStore: {
      counter: number
      increment: Function
      decrement: Function
      incrementAsync: Function
    }
  }
}

interface MyProps {
  PageStateProps: PageStateProps
}

const My = (props: MyProps) => {
  const [operate, setOperate] = useState(1)
  const [showRemarkInput, setShowRemarkInput] = useState(false)
  const [userInfo, setUserInfo] = useState({} as any)
  const [refresherTriggered, setRefresherTriggered] = useState(true)
  const [remark, setRemark] = useState(userInfo.remark)

  const [total, setTotal] = useState([0, 0, 0, 0])
  const [refresh, setRefresh] = useState(0)

  useEffect(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: (userData) => {
        setUserInfo(userData.data)
      },
    })
  }, [refresh])

  const showList = () => {
    switch (operate) {
      case 1:
        return (
          <MyShoppingList
            setTotal={setTotal}
            total={total}
            refresh={refresh}
            setRefresh={setRefresh}
          />
        )
      case 2:
        return (
          <MyOrderList
            status={0}
            setTotal={setTotal}
            total={total}
            refresh={refresh}
            setRefresh={setRefresh}
            userInfo={userInfo}
          />
        )
      case 3:
        return (
          <MyOrderList
            userInfo={userInfo}
            status={1}
            setTotal={setTotal}
            total={total}
            refresh={refresh}
            setRefresh={setRefresh}
          />
        )
      case 4:
        return (
          <MyOrderList
            userInfo={userInfo}
            status={-1}
            setTotal={setTotal}
            total={total}
            refresh={refresh}
            setRefresh={setRefresh}
          />
        )
    }
  }

  const getUserInfo = () => {
    Taro.request({
      url: `${env.domain}/user/info`,
      data: { id: userInfo.id, token: userInfo['auth'] },
      method: 'GET',
      success: (res) => {
        setRefresherTriggered(false)
        setUserInfo(res.data.data)
      },
    })
  }

  return (
    <ScrollView
      scrollY
      refresherEnabled={true}
      refresherBackground='#555555'
      enhanced
      refresherTriggered={refresherTriggered}
      onRefresherRefresh={() => {
        setRefresherTriggered(true)
        getUserInfo()
      }}
    >
      <View className='main-box'>
        <View className='m-box'>
          <View className='at-row'>
            <View className='at-col-2'>
              <AtAvatar image={userInfo.avatar}></AtAvatar>
            </View>
            <View className='at-col-6'>
              <View className='auth-box'>{userInfo.username}</View>
              <View
                className={showRemarkInput ? undefined : 'my-remark'}
                onClick={() => setShowRemarkInput(true)}
              >
                {showRemarkInput ? (
                  <AtTextarea
                    className={
                      showRemarkInput ? 'my-remark-input' : 'my-remark'
                    }
                    value={remark ?? userInfo.remark}
                    onChange={(val) => setRemark(val)}
                    maxLength={32}
                    placeholder='请输入你的个人简介...'
                    onBlur={() => {
                      if (remark === '') {
                        Taro.showToast({
                          title: '简介不能为空！',
                          icon: 'error',
                          duration: 2000,
                        })
                        return
                      }
                      Taro.request({
                        url: `${env.domain}/user/update?token=${userInfo['auth']}`,
                        data: {
                          id: userInfo.id,
                          remark: remark,
                        },
                        method: 'PUT',
                        success: () => {
                          getUserInfo()
                          setTimeout(() => setShowRemarkInput(false), 200)
                        },
                      })
                    }}
                  />
                ) : (
                  userInfo.remark
                )}
              </View>
            </View>
            <View className='at-col-4'>
              <View className='remark-box'>余额(¥{userInfo.money})</View>
              <View className='remark-box'>
                <AtButton
                  openType='onOpenSetting'
                  onClick={() => {
                    Taro.showModal({
                      title: '提示',
                      content: '充值功能暂未开启，敬请期待！',
                      success: function (res) {
                        if (res.confirm) {
                          console.log('用户点击确定')
                        } else if (res.cancel) {
                          console.log('用户点击取消')
                        }
                      },
                    })
                  }}
                >
                  充值
                </AtButton>
              </View>
            </View>
          </View>
        </View>

        <View className='m-box-div m-box order-box'>
          <View className='order-box-child'>
            <View className='m-box-bottom-border'>
              <View className='order-text'>
                <View className='at-row at-row__justify--around'>
                  <View className='at-row-4'>
                    <View className='at-row'>
                      <View className='at-row-2'>
                        <AtIcon value='star' size='18' color='#000'></AtIcon>
                      </View>
                      <View className='at-row-10 icon-text'>商品收藏</View>
                    </View>
                  </View>
                  <View className='at-row-4'>
                    <View className='at-row'>
                      <View className='at-row-2'>
                        <AtIcon value='camera' size='18' color='#000'></AtIcon>
                      </View>
                      <View className='at-row-10 icon-text'>店铺关注</View>
                    </View>
                  </View>
                  <View className='at-row-4'>
                    <View className='at-row'>
                      <View className='at-row-2'>
                        <AtIcon value='clock' size='18' color='#000'></AtIcon>
                      </View>
                      <View className='at-row-10 icon-text'>浏览记录</View>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>

          <View className='order-box-child at-row at-row__justify--around'>
            <View className='at-col-2' onClick={() => setOperate(1)}>
              <AtBadge value={total[0]} maxValue={99}>
                <AtIcon value='shopping-bag' size='24' color='#555' />
              </AtBadge>
              <View>购物车</View>
            </View>
            <View className='at-col-2' onClick={() => setOperate(2)}>
              <AtBadge value={total[1]} maxValue={99}>
                <AtIcon value='calendar' size='24' color='#555' />
              </AtBadge>
              <View>待收货</View>
            </View>
            <View className='at-col-2' onClick={() => setOperate(3)}>
              <AtBadge value={total[2]} maxValue={99}>
                <AtIcon value='message' size='24' color='#555' />
              </AtBadge>
              <View>待评价</View>
            </View>
            <View className='at-col-2' onClick={() => setOperate(4)}>
              <AtBadge value={total[3]} maxValue={99}>
                <AtIcon value='bullet-list' size='24' color='#f08c0a' />
              </AtBadge>
              <View>退款/售后</View>
            </View>
          </View>
        </View>
        <View className='m-list m-box-div'>{showList()}</View>
      </View>
    </ScrollView>
  )
}

export default My
